{{define "/home/index.html"}}
<!DOCTYPE html>
<html>

<head>
    <title>IM</title>
    {{template "/layout/head.html"}}
</head>
<link rel="stylesheet" type="text/css" href="/assets/font/iconfont.css">
<link rel="stylesheet" type="text/css" href="/assets/css/chat.css">

<body>

    <div id="app">
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title" v-text="nav_tap_list[cur_index].header"></h1>
            <a id="menu" class="mui-action-menu mui-icon mui-icon-plus mui-pull-right" href="#topPopover"></a>
        </header>

        <div class="mui-content" style="margin-bottom: 51px;" v-show="win==='main'">
            <!-- course -->
            {{template "/layout/message.html" }}

            <!-- tk -->
            {{template "/layout/contacts.html" }}

            <!-- message -->
            {{template "/layout/world.html" }}

            <!-- profile -->
            {{template "/layout/owner.html" }}
        </div>

        {{template "/layout/chat.html"}}

        <nav class="mui-bar mui-bar-tab" v-show="win==='main'">
            <a v-for="tap in nav_tap_list" class="mui-tab-item" :class="cur_index===tap.index?'mui-active':''"
                :href="tap.hash" @tap="navTap(tap.index)">
                <span class="mui-icon" :class="tap.icon"><span class="mui-badge" v-if="tap.index==0&&UnreadMsgNum>0" v-text="UnreadMsgNum"></span></span>
                <span class="mui-tab-label" v-text="tap.name"></span>
            </a>
        </nav>
    </div>

    <!--右上角弹出菜单-->
    {{template "/layout/popover_top.html"}}

    <script type="text/javascript">
        screenFuc();

        function screenFuc() {
            var topHeight = $("#header").innerHeight(); //头部高度
            //屏幕宽度小于768px时候,布局change
            var winWidth = $(window).innerWidth();
            if (winWidth <= 768) {
                var totalHeight = $(window).height(); //页面整体高度
                var infoHeight = totalHeight - topHeight;
                $(".chatBox-info").css("height", infoHeight);
                $(".chatBox-kuang").css("height", infoHeight);
                $(".chatBox-content").css("height", infoHeight - 46);
                $(".chatBox-content-demo").css("height", infoHeight - 46);

                $(".div-textarea").css("width", winWidth - 106);
            } else {
                $(".chatBox-info").css("height", 495);
                $(".chatBox-kuang").css("height", 495);
                $(".chatBox-content").css("height", 448);
                $(".chatBox-content-demo").css("height", 448);

                $(".div-textarea").css("width", 260);
            }
        }
        (window.onresize = function () {
            screenFuc();
        })();

        $(function () {
            //      发送表情
            $("#chat-biaoqing").click(function () {
                $(".biaoqing-photo").toggle();
            });
            $(document).click(function () {
                $(".biaoqing-photo").css("display", "none");
            });
            $("#chat-biaoqing").click(function (event) {
                event.stopPropagation(); //阻止事件
            });

            $(".emoji-picker-image").each(function () {
                $(this).click(function () {
                    var bq = $(this).parent().html();
                    console.log(bq)
                    $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                        "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
                        "<div class=\"right\"> <div class=\"chat-message\"> " + bq +
                        " </div> " +
                        "<div class=\"chat-avatars\"><img src=\"/assets/images/avator/avator_09.webp\" alt=\"头像\" /></div> </div> </div>"
                    );
                    //发送后关闭表情框
                    $(".biaoqing-photo").toggle();
                    //聊天框默认最底部
                    $(document).ready(function () {
                        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[
                                0]
                            .scrollHeight);
                    });
                })
            });
        })

        // 初始化mui
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        mui('.mui-scroll-wrapper').scroll();
        mui('body').on('shown', '.mui-popover', function (e) {
            //console.log('shown', e.detail.id);//detail为当前popover元素
        });
        mui('body').on('hidden', '.mui-popover', function (e) {
            //console.log('hidden', e.detail.id);//detail为当前popover元素
        });
    </script>

    <script src="/assets/js/chat.js"></script>

</body>

</html>
{{end}}